<template>
  <div class="boke">
    <div class="header">
      <van-icon name="wap-nav" class="header1" badge="9" @click="show = true" />
      <van-action-sheet
        v-model="show"
        :actions="actions"
        cancel-text="取消"
        description="你渴望成为强者吗？"
        close-on-click-action
      />
      <div class="header3">
        <h4>听听</h4>
        <h4>推荐</h4>
        <h4>故事</h4>
      </div>
      <van-icon name="add" class="header2" @click="showShare = true" />
    </div>
    <van-row class="remen">
      <a
        style="color: black; cursor: pointer"
        href="https://i.y.qq.com/n2/m/index.html?tab=recommend"
      >
        <van-col class="remen1" span="5">热门</van-col>
      </a>
      <a
        style="color: black; cursor: pointer"
        href="https://i.y.qq.com/n2/m/index.html?tab=toplist"
      >
        <van-col class="remen1" span="5">精选</van-col></a
      >
      <a
        style="color: black; cursor: pointer"
        href="https://i.y.qq.com/n2/m/share/details/taoge.html?ADTAG=myqq&from=myqq&channel=10007100&id=8027078592"
      >
        <van-col class="remen1" span="4">音乐</van-col>
      </a>
      <van-col class="remen1" span="5">情感</van-col>
      <van-col class="remen1" span="5">二次元</van-col>
    </van-row>
    <van-swipe class="my-swipe lunbo" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in jiuguan" :key="item._id" @click="detail">
        <img :src="item.blurPicUrl | formurl" alt="" />
      </van-swipe-item>
    </van-swipe>
    <van-notice-bar left-icon="volume-o" scrollable text="好好学习，天天向上" />
    <div class="zhibo">
      <van-icon name="hot" />
      <h3>看直播,零黑胶VIP</h3>
    </div>
    <div class="zhibo1">
      <van-row gutter="20">
        <van-col
          span="8"
          v-for="item in jiuguan2"
          :key="item._id"
          @click="detail"
        >
          <img :src="item.blurPicUrl | formurl" alt="" />
          <div class="van-multi-ellipsis--4">
            {{ item.name }}
          </div>
        </van-col>
      </van-row>
    </div>
    <h3 class="rili">直播日历</h3>
    <van-swipe-cell class="rili1">
      <li>演出进行时</li>
      <van-card
        num="看直播"
        desc="你想听的这里都有"
        title="午后咖啡馆"
        class="goods-card"
        thumb="http://p1.music.126.net/rYYhHXZHwCfizE0N46F37Q==/109951166115911716.jpg"
      />
      <template #right>
        <van-button square text="删除" type="danger" class="delete-button" />
      </template>
    </van-swipe-cell>
    <van-swipe-cell class="rili1">
      <li>今日 17:00</li>
      <van-card
        num="预约"
        desc="云村唱功天花板"
        title="唱将留声机"
        class="goods-card"
        thumb="http://p2.music.126.net/1tSJODTpcbZvNTCdsn4RYA==/109951165034950656.jpg"
      />
      <template #right>
        <van-button square text="删除" type="danger" class="delete-button" />
      </template>
    </van-swipe-cell>
    <van-swipe-cell class="rili1">
      <li>今日 19:00</li>
      <van-card
        num="预约"
        desc="社牛社恐大碰撞"
        title="!人生问题？研究社"
        class="goods-card"
        thumb="http://p2.music.126.net/0L5drAV43FLJk6J9dRhfew==/109951165911947840.jpg"
      />
      <template #right>
        <van-button square text="删除" type="danger" class="delete-button" />
      </template>
    </van-swipe-cell>
    <van-swipe-cell class="rili1">
      <van-card
        num="预约"
        desc="写了又删的消息"
        title="轰趴工厂"
        class="goods-card"
        thumb="http://p2.music.126.net/7uBClWo-0s4QFusH3q4HAg==/109951165912271974.jpg"
      />
      <template #right>
        <van-button square text="删除" type="danger" class="delete-button" />
      </template>
    </van-swipe-cell>
    <h3 class="rili">直播日历</h3>
    <van-swipe-cell class="rili1 rili3">
      <van-card
        num="流圆圆_ya 正在唱>"
        desc="与歌单相似度98%"
        title="DEAR JOHN"
        class="goods-card"
        thumb="http://p2.music.126.net/Te5al8ax99Q6OP_4O_Qx8g==/109951166656334893.jpg"
      />
      <template #right>
        <van-button square text="删除" type="danger" class="delete-button" />
      </template>
    </van-swipe-cell>
    <div class="yanchang">
      <van-icon name="music-o" />
      <van-cell title="孤单心事" @click="showShare = true" />
      <div class="yanchang2" @click="showShare = true">
        <span class="yanchang1">Yolost...正在唱</span>
        <van-icon name="arrow" />
      </div>
      <van-share-sheet
        v-model="showShare"
        title="立即分享给好友"
        :options="options"
        @select="onSelect"
      />
    </div>
    <div class="yanchang">
      <van-icon name="music-o" />
      <van-cell title="这世界那么多人" @click="showShare = true" />
      <div class="yanchang2" @click="showShare = true">
        <span class="yanchang1">于连...Phi正在唱</span>
        <van-icon name="arrow" />
      </div>
      <van-share-sheet
        v-model="showShare"
        title="立即分享给好友"
        :options="options"
        @select="onSelect"
      />
    </div>
    <div class="yanchang">
      <van-icon name="music-o" />
      <van-cell title="孤单心事" @click="showShare = true" />
      <div class="yanchang2" @click="showShare = true">
        <span class="yanchang1">Yolost...正在唱</span>
        <van-icon name="arrow" />
      </div>
      <van-share-sheet
        v-model="showShare"
        title="立即分享给好友"
        :options="options"
        @select="onSelect"
      />
    </div>
    <h3 class="rili">云村聊愈所</h3>
    <div class="zhibo1">
      <van-row gutter="20">
        <van-col span="8" @click="detail">
          <img
            src="http://p2.music.126.net/Ft7DB7F7wqd6jYeyu8q1AA==/109951166669424330.jpg"
            alt=""
          />
          <div>I NEVER DIE</div>
        </van-col>
        <van-col span="8" @click="detail">
          <img
            src="http://p2.music.126.net/LJ10D1f0AmqT_lODhhlAZg==/109951166958312104.jpg"
            alt=""
          />
          <div>张学友</div>
        </van-col>
        <van-col span="8" @click="detail">
          <img
            src="http://p2.music.126.net/Fp2l7_9h12895Q22lIqzXQ==/109951163438785715.jpg"
            alt=""
          />
          <div>宝宝巴士</div>
        </van-col>
      </van-row>
    </div>
    <h3 class="rili">音乐小酒馆</h3>
    <div class="zhibo1">
      <van-row gutter="20">
        <van-col span="8" @click="detail">
          <img
            src="http://p1.music.126.net/LVk-zmfjCVAOwQhvPaJ1FQ==/109951166821361589.jpg"
            alt=""
          />
          <div>NINEONE#</div>
        </van-col>
        <van-col span="8" @click="detail">
          <img
            src="http://p1.music.126.net/ZnHLCrzPu4cdBz1XPJiqGw==/109951166986889997.jpg"
            alt=""
          />
          <div>要不要买菜</div>
        </van-col>
        <van-col span="8" @click="detail">
          <img
            src="http://p1.music.126.net/_kaR9yv0ksu1CQifP4Thzw==/109951166116634923.jpg"
            alt=""
          />
          <div>王菲</div>
        </van-col>
      </van-row>
    </div>
    <h3 class="rili">进击Z世代</h3>
    <div class="zhibo1">
      <van-row gutter="20">
        <van-col span="8" @click="detail">
          <img
            src="http://p2.music.126.net/vzdyGdpOPG45A_W-FhIemA==/109951164344449366.jpg"
            alt=""
          />
          <div>王以太</div>
        </van-col>
        <van-col span="8" @click="detail">
          <img
            src="http://p2.music.126.net/eiazGAbIGMBF-Q9lInm5xw==/109951164158509628.jpg"
            alt=""
          />
          <div>华晨宇</div>
        </van-col>
        <van-col span="8" @click="detail">
          <img
            src="http://p2.music.126.net/GKhjgN1ltQYK3eYf9DdJwg==/18727981557622763.jpg"
            alt=""
          />
          <div>买辣椒也用券</div>
        </van-col>
      </van-row>
    </div>
    <h3 class="rili">云村红人</h3>
    <div class="yuncun">
      <div class="yuncun1">
        <span>云村聊愈师</span>
        <van-icon name="arrow" />
      </div>
      <van-row>
        <van-col span="8" @click="detail">
          <van-image
            round
            width="5rem"
            height="5rem"
            src="http://p2.music.126.net/W1LehYLdq0UjvZ2rl3Wk0Q==/1383185640161008.jpg"
          />
          <div class="yuncun2">烟(许佳豪)</div>
          <van-tag round type="primary" color="#FEE6E2" text-color="#EB5079"
            >暖音大叔</van-tag
          >
        </van-col>
        <van-col span="8" @click="detail">
          <van-image
            round
            width="5rem"
            height="5rem"
            src="http://p2.music.126.net/MetP2jvd6gjbUGG6NIp5_A==/109951167124899789.jpg"
          />
          <div class="yuncun2">任然</div>
          <van-tag round type="primary" color="#FEE6E2" text-color="#EB5079"
            >萌妹萝莉</van-tag
          >
        </van-col>
        <van-col span="8" @click="detail">
          <van-image
            round
            width="5rem"
            height="5rem"
            src="http://p2.music.126.net/ABu20RVf-nzyWRg83ds5rw==/1416170978775000.jpg
          "
          />
          <div class="yuncun2">群星</div>
          <van-tag round type="primary" color="#FEE6E2" text-color="#EB5079"
            >暴躁老哥</van-tag
          >
        </van-col>
      </van-row>
      <h3 class="rili">更多活动</h3>
      <div class="active">
        <van-row align="space-between">
          <a href="https://www.baidu.com/">
            <van-col span="24">
              <img
                src="https://g.fp.ps.netease.com/cg-image/file/61af475a81977979877562cbKRCaDKff03?fop=imageView/2/w/1000/h/180"
                alt=""
              />
            </van-col>
          </a>

          <van-col span="24">
            <img
              src="https://g.fp.ps.netease.com/cg-image/file/623002d357166d1450925585UaQuCk7V04?fop=imageView/2/w/1000/h/180"
              alt=""
            />
          </van-col>

          <van-col span="24">
            <img
              src="https://g.fp.ps.netease.com/cg-image/file/61ceaf12969f894c84b92bacd7sOVcHd03?fop=imageView/2/w/1000/h/180"
              alt=""
            />
          </van-col>
        </van-row>
      </div>
    </div>
  </div>
</template>

<script>
import { DJ } from "../../api/boke";
import { Toast } from "vant";
import { DJ1 } from "../../api/boke";
export default {
  data() {
    return {
      jiuguan: "",
      jiuguan1: "",
      jiuguan2: "",
      jiujiu: [],
      name: [],
      showShare: false,
      show: false,
      actions: [
        { name: "周杰伦" },
        { name: "邓紫棋" },
        { name: "席澳冬", subname: "未来歌手" },
      ],
      options: [
        [
          { name: "微信", icon: "wechat" },
          { name: "朋友圈", icon: "wechat-moments" },
          { name: "微博", icon: "weibo" },
          { name: "QQ", icon: "qq" },
        ],
        [
          { name: "复制链接", icon: "link" },
          { name: "分享海报", icon: "poster" },
          { name: "二维码", icon: "qrcode" },
          { name: "小程序码", icon: "weapp-qrcode" },
        ],
      ],
    };
  },

  computed: {},
  watch: {},

  methods: {
    detail() {
      this.$router.push("/detail");
    },
    onSelect1(item) {
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
      this.show = false;
      Toast(item.name);
    },
    onSelect(option) {
      Toast(option.name);
      this.showShare = false;
    },
    async music() {
      const result = await DJ();
      // console.log(result);
      this.jiuguan = result.albums;
      this.jiuguan2 = this.jiuguan.splice(0, 3);
      // console.log(this.jiuguan2);
    },
    async music1() {
      const result = await DJ1();
      // console.log(result);
      this.jiuguan1 = result.artists;
      //   console.log(jiuguan1)
      // console.log(this.jiuguan1);
      this.jiujiu = this.jiuguan1;
      // console.log(this.jiujiu[41].name);
      // this.jiuguan3 = this.jiuguan1.splice(0, 3);
      // console.log(this.jiuguan3);
    },
  },
  filters: {
    formurl(str) {
      if (str) {
        //说明图片存在
        if (str.startsWith("http")) {
          // 说明使用的是抓取的图片路径
          return str;
        } else {
          return "http://lanlianhua.work:3009/" + str; // 表示自己上传的图片
        }
      } else {
        // 说明没有上传图片
        return "http://www.superslide2.com/demo/images/pic1.jpg";
      }
    },
  },
  created() {
    this.music();
    this.music1();
    // console.log(this.music());
  },
  mounted() {},
  components: {},
};
</script>
<style scoped>
.active img {
  width: 100%;
  height: 80px;
  border-radius: 20px;
}
.lunbo {
  height: 220px;
}
.lunbo img {
  width: 100%;
  height: 220px;
}
.header {
  margin-top: 10px;
  height: 60px;
}
.header3 {
  display: flex;
  justify-content: center;
  float: left;
  height: 50px;
}
.header3 h4 {
  margin-left: 55px;
  margin-top: 8px;
}
.header3 h4:hover {
  border-bottom: 3px solid red;
}
.header1 {
  font-size: 30px;
  float: left;
}
.header2 {
  float: right;
  color: red;
  font-size: 30px;
}
.remen {
  text-align: center;
  font-weight: 600;
  line-height: 30px;
}
.remen .remen1 {
  width: 20%;
}
.remen .remen1:hover {
  background-color: #fc7071;
  color: white;
  width: 20%;
  height: 30px;
  border-radius: 20px;
}
.my-swipe .van-swipe-item {
  color: #fff;
  width: 33%;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  /* background-color: #39a9ed; */
}
.zhibo {
  height: 50px;
  width: 100%;
  float: left;
}
.zhibo1 {
  width: 100%;
  height: 120px;
  overflow: hidden;
  font-size: 16px;
  color: #a8a8a8;
  text-align: center;
}
.zhibo1 img {
  width: 100%;
  height: 80%;
  border-radius: 10px;
}
.zhibo .van-icon {
  height: 50px;
  line-height: 50px;
  float: left;
  font-size: 30px;
}
.zhibo h3 {
  height: 50px;
  float: left;
  line-height: 20px;
  /* clear: both; */
}
.zhibo1 .van-col {
  height: 100px;
  /* background-color: #39a9ed; */
}
.rili {
  margin-left: 20px;
}
.goods-card {
  margin: 0;
  background-color: white;
}
.rili1 .van-card__desc {
  margin-top: 10px;
  font-size: 16px;
  color: #a8a8a8;
}
.rili1 .van-card__title {
  font-size: 20px;
  margin-top: 20px;
  height: 25px;
}
.delete-button {
  height: 100%;
}
.rili1 .van-card__num {
  width: 100px;
  height: 30px;
  font-size: 20px;
  border-radius: 20px;
  line-height: 30px;
  text-align: center;
  margin-top: -50px;
  margin-right: -20px;
  color: black;
}
.rili1 .van-card__num:hover {
  border: 1px solid #e13d68;
  color: #e13d68;
}
.rili1 li {
  font-size: 20px;
  margin-left: 20px;
}
.rili1 li:hover {
  color: #e13d68;
}
.rili3 .van-card__num {
  width: 200px;
  height: 30px;
  line-height: 30px;
  font-size: 12px;
  text-align: center;
  color: #a8a8a8;
  margin-top: -50px;
  margin-right: -50px;
}
.yanchang .van-cell {
  width: 200px;
  float: left;
  /* margin-left: -20px; */
}
.yanchang .van-icon-music-o {
  float: left;
  line-height: 45px;
  margin-left: 20px;
}
.yanchang .van-cell__title {
  margin-left: -10px;
}
.yanchang .yanchang2 {
  /* float: right; */
  font-size: 12px;
  color: #a8a8a8;
  line-height: 45px;
  /* margin-right: -30px; */
}
.yuncun .yuncun1 {
  text-align: center;
  line-height: 30px;
  color: #e13d68;
  font-weight: 600;
}
.yuncun .yuncun2 {
  text-align: center;
  line-height: 30px;
  color: #a8a8a8;
  font-weight: 600;
}
.yuncun .van-col {
  text-align: center;
}
.active {
  height: 280px;
  padding-bottom: 80px;
}
.active .van-col {
  /* margin-top: 5px; */
  height: 80px;
  margin-bottom: 20px;
  background-color: #39a9ed;
  border-radius: 20px;
}
</style>